<template>
  <div class="singer-mv">
    <template v-for="item in mvDatas" :key="item.id">
      <card-item :item="item" v-bind="configObj">
        <template #topIcon>
          <el-icon
            style="padding-top: 2px; padding-left: 15px; font-size: 15px"
          >
            <video-camera />
          </el-icon>
        </template>
        <template #userName="scope">
          <div class="dt-right">
            <span>{{ $filters.formatMusicTime(scope.row.duration) }}</span>
          </div>
        </template>
      </card-item>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, defineExpose, defineProps } from 'vue'
import CardItem from '@/base-ui/card-item'
import { getSingerMv } from '@/service/singer'
import { Message } from '@/utils/message'
const props = defineProps({
  configObj: {
    type: Object,
    default: () => ({
      playShow: false,
      topShow: false,
      cardType: 'mv',
      userShow: true,
      imgUrl: 'imgurl16v9',
      wth: '24%'
    })
  }
})
// const configObj = {
//   playShow: false,
//   topShow: false,
//   cardType: 'mv',
//   userShow: true,
//   imgUrl: 'imgurl16v9',
//   wth: '24%'
// }

const mvDatas = ref()
const flag = ref(true)
function getMv(id: number, offset: number, limit = 20) {
  getSingerMv(id, offset, limit).then((res: any) => {
    mvDatas.value = res.mvs
    if (!res.hasMore) {
      flag.value = false
      Message('没有更多了！', 'warning')
    }
  })
}

function setMv(datas: any) {
  mvDatas.value = datas
}

// 定义需要导出的数据
defineExpose({
  getMv,
  flag,
  setMv
})
</script>

<style lang="less" scoped>
.singer-mv {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  .dt-right {
    text-align: right;
    padding-right: 8px;
  }
}
</style>
